<template>
    <div>
        <el-card>
            <div style="display:flex;">
                <el-aside width="80px">
                    <div class="block">
                        <el-avatar :size="70"
                           :src="userInfo.thumbAvatar == null?
                           'https://p.qlogo.cn/bizmail/NnAtIz9dn8mmFzr898uv0Waqxc6jIBy1ebSV6MWlUE7ExsJFn5BUrw/100' : userInfo.thumbAvatar">
                        </el-avatar>
                    </div>
                </el-aside>
                <div style="font-size: 10px;display: flex;flex-direction: column;justify-content: space-between;width: 100%">
                    <div>
                        <el-row :gutter="1" style="line-height: 18px;">
                            <el-col :span="1">{{ $moment().format('a') == "am" ? "上午好" : "下午好" }}</el-col>
                            <el-col :span="3">
                                <span style="font-weight: bold;font-size: 15px;"> {{ userInfo.userNickname }} </span>
                            </el-col>
                            <el-col :span="2">
                                <el-link type="primary"
                                         style="background-color: #00cc19;color: #FFFFFF;font-size: 10px;padding: 0 2px">
                                    正常
                                </el-link>
                            </el-col>
                        </el-row>
                    </div>
                    <div>
                        <el-row :gutter="1"
                                style="line-height: 20px; vertical-align:bottom;display: flex;align-items: center">
                            <el-col :span="3">登入人编号：{{ userInfo.orgNum }}</el-col>
                            <el-col :span="3">所属部门：{{ userInfo.deptName == null || userInfo.deptName == "" ? "暂无" : userInfo.deptName}}</el-col>
                            <el-col :span="3">到期时间：2022-10-01</el-col>
                            <el-col :span="1">
                                <el-link type="primary" @click="$router.push({path: '/views/index/detail'})">详情</el-link>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </div>
        </el-card>

        <div class="interspaceH"></div>

        <div style="font-size: 14px;">
            <el-row type="flex" justify="space-between">
                <el-col :span="4">
                    <div class="middle-col">
                        <el-row style="background-image: linear-gradient(to right, #99dcff , #5990ff); height: 100%;border-radius: 5px;">
                            <el-col :span="15"
                                    style="padding: 20px;display: flex;flex-direction: column;justify-content: space-around;height: 100%">
                                <div style="font-weight: 600;font-size: 24px;color: white"> {{ num6 }} </div>
                                <div style="color: white">今日新增客户数</div>
                            </el-col>
                            <el-col :span="7" style="height: 100%;display: flex;align-items: center;">
                                <el-image :src="newClient" style="width: 80px;height: 80px;"></el-image>
                            </el-col>
                            <el-col :span="2"></el-col>
                        </el-row>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="middle-col">
                        <el-row style="background-image: linear-gradient(to right, #59fc65 , #0fbe02); height: 100%;border-radius: 5px;">
                            <el-col :span="15"
                                    style="padding: 20px;display: flex;flex-direction: column;justify-content: space-around;height: 100%">
                                <div style="font-weight: 600;font-size: 24px;color: white">{{ num3 }}</div>
                                <div style="color: white">今日成交订单数</div>
                            </el-col>
                            <el-col :span="7" style="height: 100%;display: flex;align-items: center;">
                                <el-image :src="order" style="width: 80px;height: 80px;"></el-image>
                            </el-col>
                            <el-col :span="2"></el-col>
                        </el-row>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="middle-col">
                        <el-row style="background-image: linear-gradient(to right, #f8a29d , #ff5a3f); height: 100%;border-radius: 5px;">
                            <el-col :span="15"
                                    style="padding: 20px;display: flex;flex-direction: column;justify-content: space-around;height: 100%">
                                <div style="font-weight: 600;font-size: 24px;color: white">{{ num4 }}</div>
                                <div style="color: white">今日成交金额</div>
                            </el-col>
                            <el-col :span="7" style="height: 100%;display: flex;align-items: center;">
                                <el-image :src="price" style="width: 80px;height: 80px;"></el-image>
                            </el-col>
                            <el-col :span="2"></el-col>
                        </el-row>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="middle-col">
                        <el-row style="background-image: linear-gradient(to right, #fcc896 , #ff7d18); height: 100%;border-radius: 5px;">
                            <el-col :span="15"
                                    style="padding: 20px;display: flex;flex-direction: column;justify-content: space-around;height: 100%">
                                <div style="font-weight: 600;font-size: 24px;color: white"> {{ num7 }} </div>
                                <div style="color: white">今日流失客户数</div>
                            </el-col>
                            <el-col :span="7" style="height: 100%;display: flex;align-items: center;">
                                <el-image :src="lossClient" style="width: 80px;height: 80px;"></el-image>
                            </el-col>
                            <el-col :span="2"></el-col>
                        </el-row>
                    </div>
                </el-col>
            </el-row>
        </div>

        <div class="interspaceH"></div>

        <!-- 总客户数 -->
        <el-card class="indexSecond">
            <div style="display: flex; justify-content: space-between;">
                <div>
                    <div class="smallFont">总客户数（人）</div>
                    <div class="bigFont">{{ num1 }}</div>
                </div>

                <div>
                    <el-date-picker
                            v-model="time"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                </div>
            </div>

            <!-- 图表 -->
            <div ref="SCEchart1" style="height: 150px; width: 100%;"></div>
        </el-card>

        <el-card class="indexThird">
            <div style="margin-left: 10px;">
                <el-form :inline="true" :model="queryData" class="user-search">
                    <el-date-picker
                            v-model="queryData.time"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>

                    <!-- <el-select v-model="queryData.deptId" placeholder="请选择" @change=""> -->
                    <el-select v-model="queryData.deptId" placeholder="请选择">
                        <el-option
                                v-for="item in options"
                                :key="item.deptId"
                                :label="item.deptName"
                                :value="item.deptId">
                        </el-option>
                    </el-select>
                </el-form>
            </div>

            <el-row>
                <!-- 左侧 -->
                <el-col :span="18">
                    <!-- 第一排 -->
                    <el-row>
                        <el-col :span="12">
                            <div class="kuang">
                                <div class="smallFont">成交客户数（人）</div>
                                <div class="bigFont">{{ num2 }}</div>
                                <div class="cavasbox" ref="SCEchart2"></div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="kuang">
                                <div class="smallFont">成交订单数（单）</div>
                                <div class="bigFont">{{ num3 }}</div>
                                <div class="cavasbox" ref="SCEchart3"></div>
                            </div>
                        </el-col>
                    </el-row>

                    <!-- 第二排 -->
                    <el-row>
                        <el-col :span="12">
                            <div class="kuang">
                                <div class="smallFont">销售额</div>
                                <div class="bigFont">{{ num4 }}</div>
                                <div class="cavasbox" ref="SCEchart4"></div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="kuang">
                                <div class="smallFont">客单价</div>
                                <div class="bigFont">{{ num5 }}</div>
                                <div class="cavasbox" ref="SCEchart5"></div>
                            </div>
                        </el-col>
                    </el-row>

                    <!-- 第三排 -->
                    <div class="kuang">
                        <div class="smallFont">首单平均成交周期</div>
                        <div ref="SCEchart6" style="height: 150px;"></div>
                    </div>

                </el-col>
                <!-- 右侧 -->
                <el-col :span="6">
                    <div class="kuang" style="height: 610px;">
                        <div class="smallFont">排行榜</div>
                        <el-button-group>
                            <el-button type="primary" @click="rankShow = 'price'">成交额</el-button>
                            <el-button type="primary" @click="rankShow = 'client'">成交客户数</el-button>
                        </el-button-group>
                        <!-- <div v-if="rankShow == 'price'" v-for="(item, index) in priceRank" style="margin: 10px; display: flex; justify-content: center">
                            <div style="font-size: 20px; flex: 1">{{ index + 1 }}</div>
                            <div style="font-size: 20px; flex: 1">{{ item.userName }}</div>
                            <div style="font-size: 20px; flex: 1">{{ item.number }}元</div>
                        </div>

                        <div v-if="rankShow == 'client'" v-for="(item, index) in clientRank" style="margin: 10px; display: flex; justify-content: center">
                            <div style="font-size: 20px; flex: 1">{{ index + 1 }}</div>
                            <div style="font-size: 20px; flex: 1">{{ item.userName }}</div>
                            <div style="font-size: 20px; flex: 1">{{ item.number }}人</div>
                        </div> -->
                    </div>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script>
import Chart from "echarts";
import * as initData from "@/views/index/initData.js"

export default {
    data() {
        return {
            ...initData.data,
            userInfo: "张三",//this.$store.getters.getUserInfo
        }
    },
    created() {
        this.setTime();
        this.getDeptList();
        this.getChartOne();
        this.getChartTwo();
        this.getChartThree();
        this.getChartFour();
        this.getChartFive();
        this.getChartSix();
        this.getPriceRank();
        this.getClientRank();
        this.getClientNum();
    },
    methods: {
        getClientNum() {
            let payload = {
                startJoinTime: this.$moment().startOf('day').toDate(),
                endJoinTime: this.$moment().endOf('day').toDate()
            }

            // this.$request("/api/customers/getClientInfoByParams/1_0", payload, "POST").then((data) => {
            //     this.num6 = data.rows.length
            // })

            // this.$request("/api/clientLoss/getClientLossByParams/1_0", payload, "POST").then((data) => {
            //     this.num7 = data.rows.length
            // })
        },
        getChartOne() {
            let map = {startTime: this.time[0], endTime: this.time[1], deptId: this.queryData.deptId}
            let that = this;
            // this.$request("/api/statistics/getClientNum/1_0", map, "POST").then((data) => {
            //     let xArr = []
            //     let yArr = []
            //     let sum = parseInt(0);
            //     data.rows.map((item) => {
            //         xArr.push(item.everyDayCreateTime)
            //         yArr.push(item.everyDayClientNum)
            //         sum += parseInt(item.everyDayClientNum);
            //     })
            //     that.SCEoption1.xAxis.data = xArr;
            //     that.SCEoption1.series[0].data = yArr;
            //     that.num1 = sum;

            //     that.chart = Chart.init(that.$refs.SCEchart1);
            //     that.chart.setOption(this.SCEoption1)
            // })
        },

        getChartTwo() {
            let map = {startTime: this.time[0], endTime: this.time[1], deptId: this.queryData.deptId}
            let that = this;
            // this.$request("/api/generalize/getClinchClient/1_0", {map}, "POST").then((data) => {
            //     let timeArr = []
            //     let numArr = []
            //     let sum = 0;
            //     data.rows.map((item) => {
            //         timeArr.push(item.time)
            //         numArr.push(item.number)
            //         sum += parseInt(item.number);
            //     })

            //     that.SCEoption2.xAxis.data = timeArr;
            //     that.SCEoption2.series[0].data = numArr;
            //     that.num2 = sum;

            //     that.chart = Chart.init(that.$refs.SCEchart2);
            //     that.chart.setOption(this.SCEoption2)
            // })
        },
        getChartThree() {
            let map = {startTime: this.time[0], endTime: this.time[1], deptId: this.queryData.deptId}
            let that = this;
            // this.$request("/api/generalize/getClinchOrder/1_0", {map}, "POST").then((data) => {
            //     let timeArr = []
            //     let numArr = []
            //     let sum = parseInt(0);
            //     data.rows.map((item) => {
            //         timeArr.push(item.time)
            //         numArr.push(item.number)
            //         sum += parseInt(item.number);
            //     })

            //     that.SCEoption3.xAxis.data = timeArr;
            //     that.SCEoption3.series[0].data = numArr;
            //     that.num3 = sum;

            //     that.chart = Chart.init(that.$refs.SCEchart3);
            //     that.chart.setOption(this.SCEoption3)
            // })
        },
        getChartFour() {
            let map = {startTime: this.time[0], endTime: this.time[1], deptId: this.queryData.deptId}
            let that = this;
            // this.$request("/api/generalize/getSumPrice/1_0", {map}, "POST").then((data) => {
            //     let timeArr = []
            //     let numArr = []
            //     let sum = parseInt(0);
            //     data.rows.map((item) => {
            //         timeArr.push(item.time)
            //         numArr.push(item.number)
            //         sum += parseInt(item.number);
            //     })

            //     that.SCEoption4.xAxis.data = timeArr;
            //     that.SCEoption4.series[0].data = numArr;
            //     that.num4 = sum;

            //     that.chart = Chart.init(that.$refs.SCEchart4);
            //     that.chart.setOption(this.SCEoption4)
            // })
        },
        getChartFive() {
            let map = {startTime: this.time[0], endTime: this.time[1], deptId: this.queryData.deptId}
            let that = this;
            // this.$request("/api/generalize/getAvgPrice/1_0", {map}, "POST").then((data) => {
            //     let timeArr = []
            //     let numArr = []
            //     let sum = parseInt(0);
            //     data.rows.map((item) => {
            //         timeArr.push(item.time)
            //         numArr.push(item.number)
            //         sum += parseInt(item.number);
            //     })

            //     that.SCEoption5.xAxis.data = timeArr;
            //     that.SCEoption5.series[0].data = numArr;
            //     that.num5 = sum;

            //     that.chart = Chart.init(that.$refs.SCEchart5);
            //     that.chart.setOption(this.SCEoption5)
            // })
        },
        getChartSix() {
            let map = {startTime: this.time[0], endTime: this.time[1], deptId: this.queryData.deptId}
            let that = this;
            // this.$request("/api/generalize/fristClinchCycle/1_0", {map}, "POST").then((data) => {
            //     let xArr = []
            //     let yArr = []
            //     data.rows.map((item) => {
            //         xArr.push(item.userName)
            //         yArr.push(item.number)
            //     })

            //     that.SCEoption6.xAxis.data = xArr;
            //     that.SCEoption6.series[0].data = yArr;

            //     that.chart = Chart.init(that.$refs.SCEchart6);
            //     that.chart.setOption(this.SCEoption6)
            // })
        },
        getClientRank() {
            let map = {deptId: this.queryData.deptId}
            let that = this;
            // this.$request("/api/generalize/clientRank/1_0", {map}, "POST").then((data) => {
            //     that.clientRank = data.rows;
            // })
        },
        getPriceRank() {
            let map = {deptId: this.queryData.deptId}
            let that = this;
            // this.$request("/api/generalize/priceRank/1_0", {map}, "POST").then((data) => {
            //     that.priceRank = data.rows;
            // })
        },
        // 时间区间
        setTime() {
            const nowD = new Date()
            nowD.setTime(nowD.getTime() - 7 * 3600 * 1000 * 24)
            // 第一层总人数统计时间区间
            this.time[0] = nowD
            this.time[1] = new Date()
            // 第二、三层小图表
            this.queryData.time[0] = nowD
            this.queryData.time[1] = new Date()
        },
        // 部门列表下拉框
        getDeptList() {
            let that = this;
            // this.$request("/api/emp/getDeptList/1_0", {}, "POST").then((data) => {
            //     that.options = data.rows
            //     that.queryData.deptId = data.rows[0].deptId;
            // })
        },
    },
}
</script>

<style scoped>
.el-card {
    margin-top: 15px;
    width: 1640px;
}

/* /deep/ .indexSecond .el-card__body {
    padding: 10px 12px;
}

/deep/ .indexThird .el-card__body {
    padding: 10px 12px;
} */


.kuang {
    border: 1px solid rgb(215, 215, 215);
    border-radius: 10px;
    padding: 10px;
    margin: 8px;
}

.smallFont {
    font-weight: 600;
    font-size: 14px;
}

.bigFont {
    font-weight: 700;
    font-size: 35px;
}

.el-button-group {
    margin: 15px 85px;
}

.cavasbox {
    height: 120px;
}

.middle-col {
    height: 130px;
}
</style>
